<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Test</title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <style type="text/css" rel="stylesheet">

  </style>
  <script type="text/javascript" src="../jquery-1.8.2.js"></script>
  <script type="text/javascript">
$(document).ready(function() {
	$('#letter-a a').click(function() {
		$('#dictionary').load('a.html');
		return false;
	});
	$('#letter-b a').click(function() {
		$('#dictionary').empty();
		$.getJSON('b.json', function(data) {
			$('#dictionary').empty();
			$.each(data, function(entryIndex, entry) {
				var html = '<div class="entry">';
				html += '<h3 class="term">' + entry['term'] + '</h3>';
				html += '<div class="part">' + entry['part'] + '</div>';
				html += '<div class="definition">';
				html += entry['definition'];
				html += '</div>';
				html += '</div>';
				$('#dictionary').append(html);
			});
		});
		return false;
	});
	$('#letter-e').click(function() {
		$.post('e.php', {'term': $(this).text()}, function(data) {
			$('#dictionary').html(data);
		});
		return false;
	});
});
  </script>
 </head>

 <body>
  <div id="dictionary"></div>
  <div class="letters">
   <div class="letter" id="letter-a">
	<h3><a href="#">A</a></h3>
   </div>
   <div class="letter" id="letter-b">
	<h3><a href="#">B</a></h3>
   </div>
   <div class="letter" id="letter-c">
	<h3><a href="#">C</a></h3>
   </div>
   <div class="letter" id="letter-e">
    <h3>E</h3>
	<ul>
	 <li><a href="#">EVEVEVE</a></li>
	 <li><a href="#">EFDFFE</a></li>
	 <li><a href="#">EFQWT</a></li>
	 <li><a href="#">EAAAA</a></li>
	 <li><a href="#">EBBBB</a></li>
	 <li><a href="#">EFVEF</a></li>
	 <li><a href="#">EFWEQ</a></li>
	</ul>
  </div>
 </body>
</html>
